<ais-instantsearch [config]="config">
  <header class="row">
    <div>
      <a href="#" class="logo"> You <i class="fa fa-youtube-play"></i> </a>
    </div>

    <div class="searchbox-container">
      <div class="input-group">
        <ais-search-box></ais-search-box>
      </div>
    </div>
  </header>

  <section>
    <aside>
      <ul class="nav nav-list">
        <li>
          <a href="#"> <i class="fa fa-home"></i> Home </a>
        </li>
        <li class="separator"></li>
      </ul>

      <!-- Genres refinement list -->
      <h5><i class="fa fa-chevron-right"></i> Genres</h5>
      <div id="genres">
        <ais-refinement-list attribute="genre"></ais-refinement-list>
      </div>

      <!-- Ratings -->
      <h5><i class="fa fa-chevron-right"></i> Ratings</h5>
      <div id="ratings">
        <ais-rating-menu attribute="rating" max="5"></ais-rating-menu>
      </div>

      <div class="thank-you">
        Data courtesy of <a href="https://www.imdb.com">imdb.com</a>
      </div>
    </aside>

    <article>
      <!-- Stats -->
      <div id="stats" class="text-muted text-right">
        <ais-stats></ais-stats>
      </div>

      <hr />

      <!-- Hits -->
      <ais-hits [transformItems]="transformHits">
        <ng-template let-hits="hits">
          <div class="hit media" *ngFor="let hit of hits">
            <div class="media-left">
              <img [src]="hit.image" class="media-object" />
            </div>
            <div class="media-body">
              <h4 class="media-heading">
                <ais-highlight [hit]="hit" attribute="title"></ais-highlight>

                <i
                  *ngFor="let star of hit.stars"
                  [ngClass]="{
                    fa: true,
                    'fa-star': star,
                    'fa-star-o': !star
                  }"
                >
                </i>
              </h4>

              <p class="year">{{ hit.year }}</p>
              <div class="genre">
                <span
                  class="badge"
                  *ngFor="let genre of hit.genre"
                  style="margin-right: 5px;"
                >
                  {{ genre }}
                </span>
              </div>
            </div>
          </div>
        </ng-template>
      </ais-hits>

      <!-- Pagination -->
      <ais-pagination></ais-pagination>
    </article>
  </section>
</ais-instantsearch>
